<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>

<body>
    <div class="demo">
        <p><label>姓名</label><input type="text" v-model="userName" /></p>
        <p><label>密码</label><input type="text" v-model="password" /></p>
        <p><label>性别</label><input type="text" v-model="sex" /></p>
        <input type="button" value="添加用户" @click="addUser()" />
        <br />
        <input type="button" value="clickme" @click="clickme()" />
        <table :style="table_style">
            <tr :style="table_style">
                <td :style="table_style">用户ID</td>
                <td :style="table_style">用户名</td>
                <td :style="table_style">密码</td>
                <td :style="table_style">性别</td>
                <td :style="table_style">日期</td>
                <td :style="table_style">操作</td>
            </tr>
            <tr v-for="item in allUser" :style="table_style">
                <td :style="table_style">{{item.userId}}</td>
                <td :style="table_style">{{item.userName}}</td>
                <td :style="table_style">{{item.password}}</td>
                <td :style="table_style">{{item.sex}}</td>
                <td :style="table_style">{{item.date}}</td>
                <td :style="table_style"><input type="button" value="删除" @click="deleteUser(item.userId)" /></td>
            </tr>
            <tr v-show="allUser.length==0">
                <td colspan="5">暂无数据...</td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            new Vue({
                el: ".demo",
                data: {
                    msg: "v-model",
                    //初始属性
                    userName: "",
                    userId: "",
                    password: "",
                    sex: "",
                    date: "",
                    //查询的结果集
                    allUser: [],
                    //表格样式
                    table_style: {
                        border: "1px solid red"
                    },
                },
                //加载页面时调用函数
                created:function(){
                    this.clickme();
                },
                methods: {
                    //查询所有的用户接口
                    clickme: function () {
                        this.$http({
                            url: "http://localhost:8090/rabbitmq/user/select_all.do",
                        }).then(function (response) {
                            console.log(response.data);
                            this.allUser = response.data.result;
                        });
                    },
                    //添加用户接口
                    addUser: function () {
                        this.$http({
                            url: "http://localhost:8090/rabbitmq/user/insert_user_return_id.do",
                            data: {
                                userName: this.userName,
                                password: this.password,
                                sex: this.sex,
                                date: this.date,
                            }
                        }).then(function (response) {
                            console.log(response.data.code);
                            if (response.data.code == 0) {
                                
                                this.userName="";
                                this.password="";
                                this.sex="";
                            }
                        });
                    },
                    //删除用户
                    deleteUser: function (event) {
                        alert(event);
                    },
                    //测试方法
                    enterMethod: function (event) {
                        alert(event.keyCode);
                    }
                },
            });
        }
    </script>
</body>

</html>